var dboard = document.getElementById("drawing-board");
	var pencil = document.getElementById("pencil");
	var ctx = dboard.getContext("2d");
	var isDown = false;
	
	dboard.addEventListener("mousedown",function(e){
		var offset = getOffset(e);
	    ctx.beginPath();
		ctx.moveTo(e.offsetX,e.offsetY);
		isDown = true;
		
	});
	dboard.addEventListener("mousemove",function(e){
		var offset = getOffset(e);
		pencil.style.display="block";
		pencil.style.top= (offset.y-17)+"px";
		pencil.style.left= (offset.x) +"px";
		
		if(isDown){
			var coffset = dboard.getBoundingClientRect()
			ctx.clearRect(0,0,coffset.width,coffset.height);
			ctx.lineTo(e.offsetX,e.offsetY);
			ctx.stroke();
		}
	});
	dboard.addEventListener("mouseup",function(e){
		var offset = getOffset(e);
		ctx.lineTo(e.offsetX,e.offsetY);
		ctx.stroke();
		isDown = false;
	});
	
	function getOffset(e){
		var offset = {};
		offset.x = document.body.scrollLeft+e.clientX;
		offset.y = document.body.scrollTop+e.clientY;
		return offset;
	}